<template>
    <div class="expand-map-widget">
        <h2 style="color: #18a058;">dagrejs不同布局案例</h2>
        <ul class="list-dagre-group">
            <li class="list-dagre-item" id="dagre-layout1">
                <code class="layout">rankdir:'RL',align:undefined</code>
            </li>
            <li class="list-dagre-item" id="dagre-layout2">
                <code class="layout">rankdir:'RL',align:'UR'</code>
            </li>
            <li class="list-dagre-item" id="dagre-layout3">
                <code class="layout">rankdir:'RL',align:'UL'</code>
            </li>
            <li class="list-dagre-item" id="dagre-layout4">
                <code class="layout">rankdir:'RL',align:'DL'</code>
            </li>
            <li class="list-dagre-item" id="dagre-layout5">
                <code class="layout">rankdir:'RL',align:'DR'</code>
            </li>
            <li class="list-dagre-item" id="dagre-layout6">
                <code class="layout">rankdir:'TB',align:undefined</code>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { onBeforeUnmount } from "vue";
import { BruceMindMap } from "./tools/bruce-map";

const brucemap = reactive({
    map1: null,
    map2: null,
    map3: null,
    map4: null,
    map5: null,
    map6: null,
    map7: null,
})
const nodeList = ref([
    {id: 'vuejs3', node: { label: "Vue3 JS",  width: 144, height: 60 } },
    {id: 'raphael', node: { label: "Raphael", width: 160, height: 60 } },
    {id: 'svgpanzoom', node: { label: "SvgPanZoom",  width: 120, height: 60 } },
    {id: 'dagrejs', node: { label: "Dagrejs", width: 168, height: 60 } },
    {id: 'graphlib', node: { label: "Graphlib",   width: 144, height: 60 } },
    {id: 'vitejs', node: { label: "Vite 5.0",   width: 144, height: 60 } },
    {id: 'router', node: { label: "Router 4.0",   width: 144, height: 60 } },
    {id: 'navie', node: { label: "Navie UI",   width: 144, height: 60 } },
    {id: 'javascript', node: { label: "JavaScript",   width: 144, height: 60 } },
    {id: 'kbacon', node: { label: "Root",   width: 121, height: 60 }},
    {id: 'webtool', node: { label: "WEB Tool",   width: 121, height: 60 }},
    {id: 'svgtool', node: { label: "SVG Tool",   width: 121, height: 60 }}
])
const edgeList = ref([
    { sourceId: 'webtool', targetId: 'kbacon' },
    { sourceId: 'navie', targetId: 'webtool' },
    { sourceId: 'javascript', targetId: 'webtool' },
    { sourceId: 'router', targetId: 'webtool' },
    { sourceId: 'vitejs', targetId: 'webtool' },
    { sourceId: 'vuejs3', targetId: 'webtool' },
    { sourceId: 'svgtool', targetId: 'kbacon' },
    { sourceId: 'raphael', targetId: 'svgtool' },
    { sourceId: 'svgpanzoom', targetId: 'svgtool' },
    { sourceId: 'dagrejs', targetId: 'svgtool' },
    { sourceId: 'graphlib', targetId: 'svgtool' },
])

nextTick(() => {
    brucemap.map1 = new BruceMindMap(
        "#dagre-layout1",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: undefined, // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
    brucemap.map2 = new BruceMindMap(
        "#dagre-layout2",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: 'UR', // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
    brucemap.map3 = new BruceMindMap(
        "#dagre-layout3",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: 'UL', // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
    brucemap.map4 = new BruceMindMap(
        "#dagre-layout4",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: 'DL', // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
    brucemap.map5 = new BruceMindMap(
        "#dagre-layout5",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'RL', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: 'DR', // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
    brucemap.map6 = new BruceMindMap(
        "#dagre-layout6",
        {
            nodes: nodeList.value,
            links: edgeList.value,
            rankdir: 'LR', // 无向图不需要传递布局属性
            directed: true, // 有向图true，无向图false 
            nodesep: 10,
            ranksep: 10,
            align: undefined, // 从下到右布局节点
            viewPort: {
                zoom: 0.8
            }
        }
    )
})

onBeforeUnmount(() => {
    Object.keys(brucemap).forEach(key => brucemap[key] && brucemap[key].destroy())
})
</script>

<style lang="scss" src="./style.scss"></style>